<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/index.js"></script>
</head>

<body>
    <div class="w">
        <div class="search_index clearfix">
            <!-- <input type="submit" id="q-btn" value="X" class="button2"> -->
            <span class="iconfont icon-huifu button2" id="q-btn"></span>
            <form action="http://www.baidu.com/s?word=" target="_blank">
                <input type="text" value="Search..." id="b-word" name="word" size="40" class="search"
                    autocomplete="off">
                <button type="submit" id="b-btn" class="button"><span class="iconfont icon-CN_baidu"></span></button>

            </form>
        </div>
        <div class="nav">
            <a href="https://www.bilibili.com" target="_blank" class="item1"><span
                    class="iconfont icon-CN_bilibiliB"></span><i>bilibili</i></a>
            <a href="https://www.douyu.com" target="_blank" class="item2"><span
                    class="iconfont icon-douyulogoiconziti"></span><i>斗鱼</i></a>
            <a href="https://v.qq.com" target="_blank" class="item3"><span
                    class="iconfont icon-qq"></span><i>腾讯视频</i></a>
            <a href="https://tieba.baidu.com" target="_blank" class="item4"><span
                    class="iconfont icon-CN_baidutieba"></span><i>贴吧</i></a>
            <a href="https://weibo.com/" target="_blank" class="item5"><span
                    class="iconfont icon-CN_sinaweibo"></span><i>微博</i></a>
            <a href="http://ntlias-stu.boxuegu.com/#/login" target="_blank" class="item last"><span
                    class="iconfont icon-xinaixin"></span><i>TILIAS</i></a>
        </div>
        <button class="toggle_bg"><span class="iconfont icon-qiehuanbeijingtu"></span></button>
    </div>
    <script>
        var search = document.getElementById('b-word');
        var search_index = document.querySelector('.search_index');
        var btn1 = document.querySelector('.button');
        var btn = document.querySelector('.button2');
        var a = document.querySelectorAll('.nav a');
        search.onfocus = function () {
            if (this.value == 'Search...') {
                this.value = '';
            }
            btn1.style.display = 'block';
            btn.style.display = 'block';
            search_index.style.width = '500px';
        }
        btn.onclick = function () {
            search.value = 'Search...';
            btn1.style.display = 'none';
            btn.style.display = 'none';
            search_index.style.width = '150px';
            search_index.style.background = 'rgba(255, 255, 255, .3)';
        }
        // for (var i = 0; i < a.length; i++) {
        //     a[i].onmouseover = function () {
        //         a.className = '';
        //         this.className = 'current';
        //     }
        // }
        // console.log($(".nav a"));

        // $(".nav a").mouseenter(function () {
        //     $(this).addClass("current")
        // });
        // $(".nav a").mouseleave(function () {
        //     $(this).removeClass("current")
        // })
    </script>
</body>

</html>